<template>
	<view class="personal_data_box">
		<view class="form_item flex_ac_js">
			<view class="left">手机号</view>
			<view class="right">{{userInfo.userName}}</view>
		</view>
		<view class="form_item flex_ac_js">
			<view class="left">出生</view>
			<picker mode="date" :value="date" :end="endDate" @change="bindDateChange">
				<view class="right flex_ac">
					<text>{{ date || '未填写' }}</text>
					<uni-icons type="right" size="16" color="#626262"></uni-icons>
				</view>
			</picker>
		</view>
		<view class="form_item flex_ac_js">
			<view class="left">年级</view>
			<view class="right flex_ac" @tap="openPopup">
				<text>{{ grade || '未填写' }}</text>
				<uni-icons type="right" size="16" color="#626262"></uni-icons>
			</view>
		</view>


		<view class="plan_btn" @tap="saveData()">保存信息</view>

		<uni-popup ref="popup" type="bottom" background-color="#ffffff">
			<view class="popup_box">
				<view class="close" @tap="closePopup">
					<uni-icons type="closeempty" size="32" color="#161616"></uni-icons>
				</view>

				<scroll-view scroll-y style="height: calc(100% - 68rpx);">
					<view class="title_box">
						<view class="title1">你现在是</view>
						<view class="title2">我们将为你推荐合适的学习内容</view>
					</view>

					<view class="grade_box" v-for="(items, indexs) in gradeList" :key="indexs">
						<view class="title">{{ items.title }}</view>
						<view class="grade_item">
							<view :class="['item', grade === item ? 'item_active' : '' ]"
								v-for="(item, index) in items.name" :key="index" @tap="gradeClick(item)">{{ item }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		userInfo,updateReading
	} from '../../../api/user/user';

	export default {
		data() {
			return {
				userInfo: null,
				date: '',
				grade: '',
				gradeList: [{
						title: '小学',
						name: [
							'一年级',
							'二年级',
							'三年级',
							'四年级',
							'五年级',
							'六年级'
						]
					},
					{
						title: '初中',
						name: [
							'初一',
							'初二',
							'初三',
						]
					},
					{
						title: '高中',
						name: [
							'高一',
							'高二',
							'高三',
						]
					},
					{
						title: '大学',
						name: [
							'大一',
							'大二',
							'大三',
							'大四',
							'硕士生',
							'博士生',
						]
					},
					{
						title: '成人',
						name: [
							'工作党',
							'其他',
						]
					}
				]
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.date = this.userInfo.birth
			this.grade = this.userInfo.grade
		},
		computed: {
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			saveData(){
				let data = {
					birth:this.date,
					grade:this.grade
				}
				console.log(data);
				updateReading(data).then(res=>{
					console.log("ddddddddddd",res);
					if(res.code == 200) {
						uni.showToast({
							title:'保存信息成功',
							icon:'success',
							duration:1000
						})
					} else {
						uni.showToast({
							title:'保存信息失败',
							icon:'error',
							duration:1000
						})
					}
				})
			},
			
			
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			openPopup() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			gradeClick(data) {
				this.grade = data
				this.$refs.popup.close()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.personal_data_box {
		height: 100vh;
		background: $uni-bg-color-page;
		padding: 30rpx;

		.form_item {
			height: 120rpx;

			.left {}

			.right {
				color: #626262;
			}
		}

		.popup_box {
			height: calc(100vh - 34px);
			padding: 20rpx 30rpx;
			overflow-y: auto;

			.title_box {
				margin-top: 30rpx;

				.title1 {
					font-size: 36rpx;
				}

				.title2 {
					font-size: 28rpx;
					color: #626262;
					margin-top: 10rpx;
				}
			}

			.grade_box {
				margin-top: 30rpx;

				.title {
					margin-bottom: 30rpx;
				}

				.grade_item {
					display: flex;
					flex-wrap: wrap;

					.item {
						width: calc(33% - 20rpx);
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						background-color: #e8e8e8;
						margin-right: 30rpx;
						margin-bottom: 30rpx;

						&:nth-child(3n) {
							margin-right: 0;
						}
					}

					.item_active {
						background-color: #d1d0ff;
						color: #0500ffb2;
					}
				}
			}
		}
	}

	.plan_btn {
		
		text-align: center;
		width: 60%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #0000ff;
		margin: 0 auto;
		margin-top: 150rpx;
		color: #ffffff;
		border-radius: 50rpx;
		font-weight: bold;
		font-size: 32rpx;
	}
</style>